<template>
    <div>
        <el-button  @click="saveNewClass()" type="primary"> 新增班级</el-button>

        <el-dialog title="新增/编辑班级" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="班级名称" :label-width="formLabelWidth">
                    <el-input v-model="form.className" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班主任" :label-width="formLabelWidth">
                    <el-select v-model="form.userId" placeholder="请选择班主任">
                        <el-option v-for="c in form.allTeacher" :label="c.userName" :value="c.id" :key="c.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false"> 取 消</el-button>
                <el-button type="primary" @click="submit(form)"> 确 定</el-button>
            </div>
        </el-dialog>



        <el-table :data="tableData" :default-sort="{prop: 'date', order: 'descending'}" style="width: 100%">
            <el-table-column sortable prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="userName" label="班主任" width="180"></el-table-column>
            <el-table-column prop="className" label="班级"></el-table-column>
            <el-table-column label="操作" width="260" fixed="right">
                <template slot-scope="scope">
                    <el-button type="success"
                            @click="handleEdite(scope.$index, scope.row)"> 编辑
                    </el-button>
                    <el-button type="danger"
                            @click="handleDelete(scope.$index, scope.row)"> 删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.page"
                :page-sizes="[2,10, 20, 30, 40]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import {listClass,delteClass,listTeacher,saveClass,updateClass} from '../../../api/admin/classmanagement.js'
    export default {
        name: "ClassManagement",  //组件名称
        data(){
            return{
                dialogFormVisible:false,  //控制对话框显示与隐藏
                form:{
                    className:'',    // 班级名称
                    userId:0,  // 班主任ID
                    allTeacher:[],  // 所有教师列表
                    id:'',  // 班级ID
                },
                tableData:[], // 表格数据

                page: {
                    page: 1, //初始页
                    pageSize: 10,    // 每页的数据条数
                },
                param:{
                    id:'',  // 删除操作的参数ID
                },
                status:{
                    roleId:2  // 查询教师列表时的状态参数
                },
                tag:'123',  // 标记当前操作是新增还是编辑
                total: 0, //总数据条数
            }
        },
        created() {
            this.listAllClass(this.page)  //创建时加载所有班级数据
            this.listAllTeacher(this.status)  //创建时加载所有教师数据
        },
        methods:{
            saveNewClass(){   // 新增班级按钮点击事件处理函数
                this.tag='new'   // 设置标记为新增
                console.log(this.tag)  // 打印标记
                this.dialogFormVisible=true   // 显示对话框
            },

            handleEdite(index,row){   // 编辑班级按钮点击事件处理函数
                this.dialogFormVisible=true   // 显示对话框
                this.form.className=row.className   // 设置表单中的班级名称
                this.form.userId=row.userName   // 设置表单中的班主任ID
                this.form.id=row.id   // 设置表单中的班级ID
            },

            submit(form){   // 提交表单处理函数
                if(this.tag!='new'){    // 判断是否为编辑操作
                    if(typeof this.form.userId =="string"){   // 如果userId是字符串类型，则清空
                        this.form.userId= ''
                    }
                    console.log(this.tag,'pppp')  // 打印标记
                    this.dialogFormVisible=false  // 隐藏对话框
                    updateClass(form).then(resp=>{    // 调用更新班级接口
                        if(resp.data.code==200){    // 判断更新是否成功
                            this.listAllClass(this.page)    // 重新加载班级数据
                            this.$message({
                                message: '操作成功',    // 提示操作成功
                                type: 'success'
                            });
                        }else {
                            this.$message.error('编辑失败');   // 提示编辑失败
                        }
                    })
                }else{
                    saveClass(form).then(resp=>{  // 调用新增班级接口
                        this.dialogFormVisible=false    // 隐藏对话框
                        if(resp.data.code==200){  // 判断新增是否成功
                            this.tag='123'  // 重置标记
                            this.listAllClass(this.page)  // 重新加载班级数据
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                        }else {
                            this.$message.error('新增失败');
                        }
                    })
                }
            },


            listAllTeacher(status){   // 获取所有教师列表
                listTeacher(status).then(resp=>{
                    this.form.allTeacher=resp.data.resultData   // 将教师列表赋值给表单中的allTeacher属性
                })
            },

            handleDelete(index,row){  // 删除班级按钮点击事件处理函数
                this.param.id=row.id // 设置删除操作的参数ID
                delteClass(this.param).then(resp=>{ // 调用删除班级接口
                    if(resp.data.code==200){ // 判断删除是否成功
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.listAllClass(this.page)
                    }else {
                        this.$message.error('删除失败');
                    }
                })
            },
            listAllClass(page){ // 获取所有班级列表
                listClass(page).then(resp=>{
                    this.tableData=resp.data.resultData.data  // 将班级数据赋值给表格数据
                    this.total=resp.data.resultData.total // 将总数据条数赋值给total属性
                })
            },
            handleSizeChange(size) { // 分页大小改变事件处理函数
                this.page.pageSize = size; // 设置每页的数据条数
                this.listAllClass(this.page) // 重新加载班级数据
                console.log(`每页 ${size} 条`); // 打印每页的数据条数
            },
            handleCurrentChange(pageNum) { // 当前页改变事件处理函数
                this.page.page = pageNum; // 设置当前页码
                this.listAllClass(this.page)  // 重新加载班级数据
                console.log(`当前页: ${val}`);  // 打印当前页码
            },
        }
    }
</script>

<style scoped>

</style>